<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
    <div style="text-align:center;">
      <h1>购物车</h1>
      <div v-for="item in cart" :key="item.id" style="margin: 10px 0;">
        {{ item.name }} - ￥{{ item.price }} - 数量：{{ item.count }}
        <button @click="increment(item.id)">+</button>
        <button @click="decrement(item.id)">-</button>
      </div>
      <h2>总价：￥{{ totalPrice }}</h2>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState(['cart']),
    ...mapGetters(['totalPrice'])
  },
  methods: {
    ...mapMutations(['INCREMENT', 'DECREMENT']),
    increment(id) {
      this.INCREMENT(id)
    },
    decrement(id) {
      this.DECREMENT(id)
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}

button {
  width: 30px;
  height: 30px;
  margin-left: 5px;
}
</style>
